<template>
  <div class="adivice-info">
    <div class="search-content">
      <Col class="panel search-panel" :span="24" style="padding:10px;">
      <Button type="primary" icon="md-arrow-back" @click="backToCompany">返回上一页</Button>
      <Breadcrumb style="display:inline-block;line-height: 36px;margin-left: 15px;">
        <BreadcrumbItem to="/user/video">热成像监控</BreadcrumbItem>
        <BreadcrumbItem>设备详情</BreadcrumbItem>
      </Breadcrumb>
      </Col>
    </div>
    <Col class="panel tab-panel adevice-tab-panel" style="height:calc(100% - 73px);" :span="24">
    <Row class="video-device-detail">
      <Col :span="isFullPage ? 24 : 12" class="clo_14">
      <div class="v-d-14-head">
        <Row style="height: 100px;">
          <Col span="12">
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:72px;">设备ID&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 72px);">
              {{baseInfo.deviceNo}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:72px;">设备位置&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 72px);" title="selectRow.location">
              {{baseInfo.location}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:72px;">当前状态&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 72px);">
              <Tag color="green" v-show="baseInfo.status==1">正常</Tag>
              <Tag color="yellow" v-show="baseInfo.status==2">告警</Tag>
              <Tag color="#909399" v-show="baseInfo.status !==1 && baseInfo.status !==2">未知</Tag>
            </dd>
          </dl>
          </Col>
          <Col span="12">
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:72px;">设备名称&nbsp;:</dt>
            <dd class="basicInfo-item value autocut" :title="baseInfo.name" style="width: calc(100% - 72px);">
              {{baseInfo.name}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:72px;">更新时间&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 72px);">
              {{moment(baseInfo.updatedAt).format("YYYY-MM-DD HH:mm:ss")}}
            </dd>
          </dl>
          <dl class="basicInfo-block cf">
            <dt class="basicInfo-item name" style="width:72px;">是否在线&nbsp;:</dt>
            <dd class="basicInfo-item value" style="width: calc(100% - 72px);">
              <Tag color="success" v-if="baseInfo.online">在线</Tag>
              <Tag color="error" v-else>离线</Tag>
            </dd>
          </dl>
          </Col>
        </Row>
      </div>
      <div class="v-d-14-body">
        <Card style="width: 100%;overflow: hidden;">
          <div style="width:100%;overflow: hidden;">
            <Col :span="24">
            <DatePicker size="small" :options="options" v-model="searchData.date" type="date" placeholder="选择时间" @on-change="searchTableData" style="width: 200px" :clearable="false" />
            <Select size="small" @on-change="selectChange" clearable v-model="searchData.q" style="width:200px">
              <Option v-for="item in pointList" :value="item.val" :key="item.value">{{ item.des }}</Option>
            </Select>
            </Col>
            <Col :span="24" style="margin-top:10px;">
            <Table :columns="columns" :data="tabelDatas" border :loading="pageInfo.loading"></Table>
            </Col>
            <Col class="panel page-panel cf" :span="24" style="margin-top: 10px;height: auto;padding: 5px 10px;box-shadow: none;">
            <Page :total="pageInfo.total" size="small" :page-size="10" :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging"></Page>
            </Col>
          </div>
        </Card>
      </div>
      </Col>
      <Col span="12" class="col_10" v-if="!isFullPage">
      <div class="v-d-10-body">
        <div class="w1" style="height: 300px;" id="hotVideoChartUser"></div>
      </div>
      </Col>
    </Row>
    </Col>
  </div>
</template>

<script>
import { getVideoParams, getTempData, getTestTemPointList } from "@/api"
import mTag from "@/components/m-tag"
const colors = [
  "#60acfc",
  "#32d3eb",
  "#5bc49f",
  "#feb64d",
  "#ff7c7c",
  "#9287e7",
  "#668ED6",
  "#B55CBD"
]
export default {
  data() {
    const vm = this
    return {
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now()
        }
      },
      selectRow: {},
      pointList: [],
      id: null,
      isFullPage: true,
      baseInfo: {},
      pageInfo: {
        total: 0,
        page: 1,
        loading: false
      },
      searchData: {
        q: null,
        date: new Date()
      },
      tabelDatas: [],
      chartMap: [],
      columns: [
        {
          title: "参数名",
          align: "center",
          key: "des"
        },
        {
          title: "参数值",
          align: "center",
          render: (h, params) => h("span", params.row.value + "℃")
        },
        {
          title: "更新时间",
          align: "center",
          render: (h, params) =>
            h(
              "span",
              vm.moment(params.row.createdAt).format("YYYY-MM-DD HH:mm:ss")
            )
        }
      ]
    }
  },

  beforeRouteUpdate(to, from, next) {
    next(vm => {
      vm.id = vm.$route.params.id
      vm.getInitialState()
      vm.getTemperatureTable()
    })
  },

  mounted() {
    this.id = this.$route.params.id
    this.getInitialState()
    this.getTemperatureTable()
    this.getTestTemPointList()
  },

  methods: {
    // 获取点位列表
    getTestTemPointList() {
      const vm = this
      getTestTemPointList().then(res => {
        if (res.code == 200) {
          vm.pointList = res.data
        }
      })
    },

    // 切换分页
    switchThePaging(index) {
      const vm = this
      vm.pageInfo.page = index
      vm.getTemperatureTable()
    },

    // 更改时间
    searchTableData() {
      const vm = this
      vm.pageInfo.page = 1
      vm.getTemperatureTable()
      if (!!vm.searchData.q) {
        vm.isFullPage = false
        vm.printWhichPicture()
      }
    },

    // 更改点位更新
    selectChange(val) {
      const vm = this
      vm.pageInfo.page = 1
      vm.getTemperatureTable()
      if (!!val) {
        vm.isFullPage = false
        vm.printWhichPicture()
      } else {
        vm.isFullPage = true
      }
    },

    backToCompany() {
      this.$router.push("/user/video")
    },

    getInitialState() {
      const self = this
      let id = self.id,
        params = {
          id
        }
      getVideoParams(params).then(res => {
        if (res.code == 200) {
          const { base } = res.data
          this.baseInfo = base
        }
      })
    },

    getTemperatureTable() {
      const self = this
      let id = self.id,
        params = {
          id
        }
      getTempData(params).then(res => {
        if (res.code == 200) {
          self.tabelDatas = res.data
        }
      })
    },

    // 获取表格数据
    getTemperatureTable() {
      const self = this
      self.pageInfo.loading = true
      let date = !!self.searchData.date
        ? self.moment(self.searchData.date).format("YYYY-MM-DD")
        : null
      let q = self.searchData.q
      let id = self.id,
        params = {
          id,
          size: 10,
          page: self.pageInfo.page,
          date,
          q
        }
      getTempData(params).then(res => {
        if (res.code == 200) {
          self.tabelDatas = res.data.list
          self.pageInfo.total = res.data.total
          setTimeout(_ => {
            self.pageInfo.loading = false
          }, 500)
        }
      })
    },

    printWhichPicture() {
      const vm = this
      const filterDate = JSON.parse(JSON.stringify(vm.pointList))
      const value = vm.searchData.q
      let date = filterDate.filter(t => t.val === value)[0].des
      if (date.indexOf("点") > -1) {
        vm.printPoints()
      } else if (date.indexOf("区") > -1) {
        vm.printArea()
      }
    },
    // 点位的曲线图
    printPoints() {
      const vm = this
      let chartMap = {}
      let date = !!vm.searchData.date
        ? vm.moment(vm.searchData.date).format("YYYY-MM-DD")
        : null
      let q = vm.searchData.q
      let id = vm.id,
        params = {
          id,
          size: 100000,
          page: vm.pageInfo.page,
          date,
          q
        }
      let option = {
        title: {
          text: "温度曲线图",
          subtext: date,
          left: "center"
        },
        legend: {
          data: [],
          bottom: 0,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: true,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          },
          axisLabel: {
            color: "#333"
          }
        },
        yAxis: {
          name: "单位: ℃",
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          },
          axisLabel: {
            color: "#333"
          },
          nameTextStyle: {
            color: "#333"
          }
        },
        color: [...colors],
        series: []
      }
      let wendu = {
        name: "",
        data: [],
        type: "line",
        smooth: true,
        connectNulls: true
      }
      let name
      vm.$nextTick(_ => {
        let mapInstance = vm.echarts.init(
          document.getElementById("hotVideoChartUser")
        )
        mapInstance.clear()
        getTempData(params).then(res => {
          if (res.code == 200) {
            chartMap = res.data.list
            if (chartMap.length === 0) {
              mapInstance.setOption({
                title: {
                  text: "暂无数据",
                  textStyle: {
                    fontWeight: "bold",
                    fontSize: 28
                  },
                  left: "center",
                  top: "center"
                }
              })
              return false
            }
            name = chartMap[0].des
            option.legend.data[0] = name
            wendu.name = name
            option.xAxis.data = chartMap
              .map(t => vm.moment(t.createdAt).format("HH:mm:ss"))
              .reverse()
            wendu.data = chartMap
              .filter(t => t.des.indexOf("点") > -1)
              .reverse()
            option.series.push(wendu)
            mapInstance.setOption(option, true)
          }
        })
      })
    },

    // 区域的曲线图
    printArea() {
      const self = this
      let chartMap = {}
      let date = !!self.searchData.date
        ? self.moment(self.searchData.date).format("YYYY-MM-DD")
        : null
      let q = self.searchData.q
      let id = self.id,
        params = {
          id,
          size: 100000,
          page: self.pageInfo.page,
          date,
          q
        }
      let option = {
        title: {
          text: "温度曲线图",
          subtext: date,
          left: "center"
        },
        legend: {
          data: ["最高温度", "最低温度", "平均温度"],
          bottom: 0,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: true,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          },
          axisLabel: {
            color: "#333"
          }
        },
        yAxis: {
          name: "单位: ℃",
          type: "value",
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          },
          axisLabel: {
            color: "#333"
          },
          nameTextStyle: {
            color: "#333"
          }
        },
        color: [...colors],
        series: []
      }
      let avgLine = {
        name: "平均温度",
        data: [],
        type: "line",
        smooth: true,
        connectNulls: true
      }
      let maxLine = {
        name: "最高温度",
        data: [],
        type: "line",
        smooth: true,
        connectNulls: true
      }
      let minLine = {
        name: "最低温度",
        data: [],
        type: "line",
        smooth: true,
        connectNulls: true
      }
      self.$nextTick(_ => {
        let mapInstance = self.echarts.init(
          document.getElementById("hotVideoChartUser")
        )
        mapInstance.clear()
        getTempData(params).then(res => {
          if (res.code == 200) {
            chartMap = res.data.list
            if (chartMap.length === 0) {
              mapInstance.setOption({
                title: {
                  text: "暂无数据",
                  textStyle: {
                    fontWeight: "bold",
                    fontSize: 28
                  },
                  left: "center",
                  top: "center"
                }
              })
              return false
            }
            // option.xAxis.data = chartMap
            //   .map(t => self.moment(t.createdAt).format("HH:mm:ss"))
            //   .reverse();
            avgLine.data = chartMap
              .filter(t => t.des.indexOf("平均温度") > -1)
              .reverse()
            minLine.data = chartMap
              .filter(t => t.des.indexOf("最低温度") > -1)
              .reverse()
            maxLine.data = chartMap
              .filter(t => t.des.indexOf("最高温度") > -1)
              .reverse()

            option.xAxis.data = avgLine.data.map(t =>
              self.moment(t.createdAt).format("HH:mm:ss")
            )
            option.series.push(minLine, maxLine, avgLine)
            mapInstance.setOption(option, true)
          }
        })
      })
    }
  }
}
</script>
